<template>
	<div class="contains">
		<div class="page-title">
			 <p>请选择你的身份标签</p>
			 <span>识别身份认证</span>
		</div>
		<div class="role-contains">
			 <div class="role-item">
				  <image src="../../assets/images/index_1.png" alt="">
				  <div class="role-text">你好，我是经销商</div>
			 </div>
			 <div class="role-item">
				 <image src="../../assets/images/index_2.png" alt="">
			 	  <div class="role-text">你好，我是门店</div>
			 </div>
			 <div class="role-item">
				  <image src="../../assets/images/index_3.png" alt="">
			 	  <div class="role-text">你好，我是工厂</div>
			 </div>
		</div>
		<div class="confirm-btn">
			 <button type="default" @click="toRedirect()">点击选择标签</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
		  return {
		  }
		},
		methods:{
			toRedirect(){
				uni.navigateTo({
					'url':'/pages/views/category/index',
				})
			}
		}
	}
</script>

<style>
	.page-title {
		width: 100%;
		height: 80px;
	}
	.page-title p { text-indent: 10px; font-size: 20px; color: #000; height: 40px; line-height:40px;}
	.page-title span { color: #666; font-size: 13px; margin-left: 20px;}
	
	.role-contains { width: 95%; height: auto; margin: 0 auto;}
	.role-item { position: relative; width: 100%; height: 120px; margin-bottom: 20px;}
	.role-item image { width: 100%; height: 120px;}
	.role-item .role-text { position: absolute; top: 20px; left: 20px; font-size: 25px; color: aliceblue;}
	.confirm-btn { width: 95%; height: 30px; margin: 0 auto;}
	.confirm-btn button { background: #ff552e; height: 50px; color: aliceblue; line-height: 50px; font-size: 16px;} 
</style>